{extend name="base" /}
{block name="css"}
<link rel="stylesheet" href="/public/css/all.min.css">
<link rel="stylesheet" href="https://paidou.cdn.dgyunju.cn/css/server_id.css?v={$version|default=100}">
<link rel="stylesheet" href="https://paidou.cdn.dgyunju.cn/css/common.css?v={$version|default=100}">
<style>
    .fa{
        font-size: 3.125rem
    }
    .is-active .fa {
        font-size: 3.125rem;
        color: #177fef;
        margin-bottom: 0.3125rem;
    }
    ul li {
        list-style: none;
        display: flex;
        justify-content: center;
    }
</style>
{/block}
{block name="content"}
<div id="container">
    <div id="header"></div>
    <div id="rightside"></div>
    <div id="content">
        <div class="top-coup">
            <ul class="icon-coup">
                {foreach $list as $vo}
                <li class="{if $vo['id'] == $item['id']} is-active {/if}" data-tab="tab">
                    <a href="/solution/{$vo['id']}.html" target="_self" class="icon-list" style="color:#D8D8D8;">
                        <i class="fa {$vo['icon']}"></i>
                        <div class="icon-word">{$vo['title']}</div>
                    </a>
                </li>
                {/foreach}
            </ul>
        </div>
        <div class="tab-contents" style="height: 100%">
            <div id="tab1" class="tab-content active" >
                <div class="banner">
                    <img class="image" src="{$item['index_img']|default=''}?imageView2/0/h/560" alt="">
                </div>
                <div class="content-center">
                    <div class="content-left">
                        <h3 class="left-top">{$item['title']|default=''}</h3>
                        <p class="left-word">{$item['summary']|default=''}</p>
                    </div>
                    <div class="content-right">
                        <ul class="right-icon">
                            <li class="icon-list" data-id="use_document" >
                                <i class="fi fi-ziliaoshouce another" ></i>
                                <div>{:lang('use_document')}</div>
                            </li>
                            <li class="icon-list"  data-id="video">
                                <i class="fi fi-shipin"></i>
                                <div>{:lang('video')}</div>
                            </li>
                            <li class="icon-list"  data-id="protocol_documents">
                                <i class="fi fi-16"></i>
                                <div>{:lang('protocol_documents')}</div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <div class="down-news">

            <div class="news-top">
                <h3 class="top-h3">相关案例</h3>
                <p>您可以通过已经成功落地的项目来了解我们可以提供的服务</p>
            </div>
            {if  isset($item['cases'])&&$item['cases']}
            <ul class="ul-coup">

                {foreach $item['cases'] as $c}
                <li class="li-list">
                    <a href="/case/{$c['id']}.html">
                        <img class="image" src="{$c['cover']}" alt="">
                        <div class="gollry">
                            {$c['title']}
                        </div>
                        <div class="mask">
                            <h3 class="mask-top"></h3>
                            <p class="mask-p">  {$c['summary']|raw|htmlspecialchars_decode}</p>
                        </div>
                    </a>
                </li>
                {/foreach}

            </ul>
            {else}
            <div class="no-data">
                <img class="no-img" src="https://paidou.cdn.dgyunju.cn/image/nodata.png" alt="">
                <p>{:lang('no_data')}~</p>
            </div>
            {/if}
        </div>
        <div class="modal">
            <div class="modal-content">
                <div class="modal-head">
                    <div class="head-left">
                        {:lang('Information Center')}
                    </div>
                    <div class="head-right">
                        x
                    </div>
                </div>
                <div class="modal-center">
                    <div class="no-data">
                        <i class="fi fi-kongzhuangtai"></i>
                        <div>{:lang('no_data')}</div>
                    </div>
                    <div class="has-data"  style="display: none;">

                    </div>
                </div>
            </div>
        </div>
        <div id="pagination" class="l-page"></div>
    </div>
    <div id="footer"></div>
</div>

{/block}


{block name="script"}
<script src="https://paidou.cdn.dgyunju.cn/js/pagination.min.js?v1"></script>
<script src="https://paidou.cdn.dgyunju.cn/js/common.js?v={$version|default=100}"></script>
<script>
    $(document).ready(function(){
        $('.ul-coup .li-list').hover(function(){
            $(this).children().children(".mask").toggle()
        })
        // $("#pagination").pagination({
        //     /*当前页码*/
        //     currentPage: 1,
        //     /*总共有多少页*/
        //     totalPage:0,
        //     /*是否显示首页、尾页 true：显示 false：不显示*/
        //     isShow:true,
        //     /*分页条显示可见页码数量*/
        //     count:5,
        //     /*第一页显示文字*/
        //     homePageText:'首页',
        //     /*最后一页显示文字*/
        //     endPageText:'尾页',
        //     /*上一页显示文字*/
        //     prevPageText:'<',
        //     /* 下一页显示文字*/
        //     nextPageText:'>',
        //     /*点击翻页绑定事件*/
        //     callback: function(page) {
        //         console.log(page);
        //     }
        // });
        const btn = $('.right-icon .icon-list');
        const modal = $('.modal');
        const cancel=$('.modal .head-right')
        btn.click(function() {
            let type = $(this).attr('data-id');
            $.ajax({
                url:"__DOMAIN__/api/get_attr",
                data:{
                    type:type,
                    page:1,
                    info:'solution',
                    id:{$vo['id']|default=0},
                },
                method:'post',
                success:function(e){
                    let list = e.data.list;
                    console.log(list);
                    $("#no-data").hide();
                    $("#has-data").empty();
                    if (list.length ==  0){
                        $("#no-data").show();
                    }else{
                        $("#has-data").show();
                        for (let i = 0; i < list.length; i++) {
                            let item =list[i];
                            $("#has-data").append(`  <a href="${item['file_path']}" target="_blank" style="color: black"> <div class="data-left">
                            ${item['title']}
                        </div>
                        <div class="data-right-btn">
                            {:lang('view')}
                        </div></a>`);

                        }
                    }
                    modal.show();


                },
                fail:function(){


                }
            })

            modal.show();
        });
        cancel.click(function(){
            modal.hide()
        })
        modal.on('click', function(e) {
            if ($(e.target).closest('.modal-content').length > 0) {
                console.log(1);
            } else {
                modal.hide();
            }
        });
    });


</script>
{/block}